<script setup>
  import * as cpzzApi from '@/api/cpzzApi' 
  import $moment from "moment"
  import axios from 'axios';
  import { v4 as uuidv4 } from 'uuid';
  import { computed, onMounted,ref,watch} from 'vue';
  import {ElMessage} from "element-plus"
  import {useRoute} from "vue-router";
  const route = useRoute();
  const params = ref({});
  params.value =  route.query;
  if(params.value.foreStartTime == ""){
    params.value.foreStartTime = $moment().subtract("1",'days').hours("08").format("YYYYMMDDHH0000");
    params.value.foreEndTime = $moment().hours("08").format("YYYYMMDDHH0000")
  }
  const pageofficeTitle = ref("");
  pageofficeTitle.value = decodeURIComponent(params.value.fileName);

  const showHtml = ref(false);
  const poHtmlCode = ref("");
  const openWorld = () => {
    showHtml.value = true;
    let url = `/cpzzapi/office/CzSimpleWord/Word`;
    axios({
      method: "post",
      url: url,
      params:{
        path:decodeURIComponent(params.value.abspath),
        //path:`E:/home/nriet/product_TJ/word/temp/TJ_HHLY1/2024/202405/20240529/15/TJ_HHLY1_20240529144343_1.docx`,
        userId:1
      }
    }).then((response) => {
      poHtmlCode.value = response.data;
      //pageofficectrl.Reload();
    }).catch(function (err) {
      console.log(err);
      alert("打开失败");
      // message({
      //   type:"error",
      //   text: `打开失败`
      // });
    });
  }
  const isSave = ref(false);
  const isPublish = ref(false);
  const publish = ()=>{
    isPublish.value = true;
    Save();
    // if(isSave.value){
    //   let str = `taskId=${params.value.taskId}&userId=${params.value.userId}&modelId=${params.value.modelId}&year=${params.value.year}&orders=${params.value.orders}&areaIds=${params.value.areaIds}`
    //   pageofficectrl.ShowHtmlModelessDialog(
    //     "publishpage",
    //     str,
    //     "width=1500px;height=900px;"
    //   )
    // }else{
    //   alert("请先保存后再点击发布");
    //   // message({
    //   //   type:"warning",
    //   //   text: `请先保存后再点击发布`
    //   // });
    // }
  }
  //保存
  const Save = ()=>{
    pageofficectrl.WebSave();
    pageofficectrl.WebSaveAsPDF(undefined,undefined,true);
    isSave.value = true;
  }
  const SaveAs = () => {
    pageofficectrl.ShowDialog(2);
  }
  const IsFullScreen = () => {
    pageofficectrl.FullScreen = !pageofficectrl.FullScreen;
  }
  const Close = () => {
    // window.external.close();
  }
const OnPageOfficeCtrlInit = () => {
  //设置标题
 // pageofficectrl.Caption = "一周天气预报";
  //隐藏自定义工具栏
  pageofficectrl.CustomToolbar  = false;
  //隐藏标题栏
  pageofficectrl.Titlebar = false;
}
const AfterDocumentOpened = ()=>{
 //禁用掉ctrl+s
 pageofficectrl.DisableSave = true;
 pageofficectrl.DisableSaveAs = false;
}

const BeforeDocumentSaved= ()=> {}

const AfterDocumentSaved= ()=> {
  if(isPublish.value){
    isPublish.value = false;
    cpzzApi.getpublishPro({
      fileName:pageofficeTitle.value,
      modelId:params.value.modelId,
      orders:params.value.orders,
      taskId:params.value.taskId,
      userId:params.value.userId,
      year:params.value.year
    }).then(res=>{
        const {code,data} = res;
        if(data){
          alert("发布成功");
        }else{
          alert("发布失败");
        }
    })
  }
// PageOffice的文档保存后事件回调函数
//   let result=pageofficectrl.CustomSaveResult;
//   if(result !=""){
//  //ElMessage.success('保存成功');
//  // pageofficectrl.WebSaveAsPDF();
//   }else{
//   //ElMessage.error('保存失败');
//   }
}

//下载
const downloadWord = ()=>{
  //调用保存接口 1:打开 2:保存 3:另存为 4:打印 5:打印设置 6:文件属性
  pageofficectrl.ShowDialog(2);
}
const mapEntity = ref(null);
const moveObj = ref({
  lon:120.0305,
  lat:31.8307
})
const checkLocationObj = ref({
  lon:120.0305,
  lat:31.8307
})
const initMap = ()=>{
    mapEntity.value = new GIS.Map({
        mapId: "mapId",
        conFileUrl: "/gis/gis4.0-sdk/items/02NJSZQX/conf/conf.json?t="+new Date().getTime(),//配置文件地址
        center:[120.0305, 31.8307],
        zoom: 8
    });
    mapEntity.value.on("eventIdMouseover","move",(e)=>{
      moveObj.value.lon = Number(e.coord[0]).toFixed(4);
      moveObj.value.lat = Number(e.coord[1]).toFixed(4);
    })
    mapEntity.value.on("eventIdMouseclick","click",(e)=>{
      checkLocationObj.value.lon = Number(e.coord[0]).toFixed(4);
      checkLocationObj.value.lat = Number(e.coord[1]).toFixed(4);
      pointIconLayer();
    })
    getStationData();
}

const stationCheck = ref("")
const stationList = ref([])
const getStationData = ()=>{
  cpzzApi.getStationList().then(res=>{
    const {code,data} = res;
    if(code == 200 && data.length>0){
      stationList.value = data;
      stationCheck.value = data[0].station_id;
      tableStation.value = data[0].station_id;
      moveObj.value.lon = data[0].lon;
      moveObj.value.lat = data[0].lat;
      checkLocationObj.value.lon = data[0].lon;
      checkLocationObj.value.lat = data[0].lat;
    }
  })
}

const pointIconLayer = ()=>{
  if(!mapEntity.value || !checkLocationObj.value || !checkLocationObj.value.lat || !checkLocationObj.value.lon){
      return;
  }
  if (mapEntity.value.getLayerById("pointIconLayer")) {
     mapEntity.value.removeLayerById("pointIconLayer");
  }
  let checkData = [
    {
      src: new URL(`@/assets/location.png`, import.meta.url).href,
      type: 'img',
      coords: [checkLocationObj.value.lon, checkLocationObj.value.lat],
      text: '',
      offset: [0, 0],
      type: 'img'
    },
  ]
  let pointIconLayer = new GIS.IconLayer("pointIconLayer", checkData, { zIndex: 10 });
  mapEntity.value.addLayer(pointIconLayer);
  //修改选中要素的经纬度
  if(textActiveItem.value?.paramsObj?.lat){
    textActiveItem.value.paramsObj.lat = checkLocationObj.value.lat;
    textActiveItem.value.paramsObj.lon = checkLocationObj.value.lon;
  }
}
watch(stationCheck,()=>{
  let data = stationList.value.filter(item=>item.station_id == stationCheck.value);
   if(data.length>0){
    checkLocationObj.value.lon = data[0].lon;
    checkLocationObj.value.lat = data[0].lat;
    pointIconLayer();
   } 
},{ immediate: true })

const tagType = ref("text")
const tagTextList = ref([]);
const picList = ref([]);
const tableType = ref("sk")
const tableStation = ref("")
const ybType = ref("hour")
const resuTabType = ref("");
const tableList = ref([]);
const startDay = ref($moment().subtract(1, 'days').format('YYYY-MM-DD'));
const startHour = ref($moment().format('08:00'));
const qbDay = ref($moment().subtract(1, 'days').format('YYYY-MM-DD'));
const qbHour = ref($moment().format('08:00'));
const endDay = ref($moment().format('YYYY-MM-DD'));
const endHour = ref($moment().format('08:00'));
const dayStartSk = ref("24")
const dayStartSkDatas = ref([
  {value: "24",label: "1"},
  {value: "48",label: "2"},
  {value: "72",label: "3"},
  {value: "96",label: "4"},
  {value: "120",label: "5"},
  {value: "144",label: "6"},
  {value: "168",label: "7"}
])
const hourStartSk = ref("0")
const hourEndSk = ref("12")
const hourInterval = ref("1");
const hourIntervalbak = ref("1");
const hourIntervalDatas = ref([
  {value: "1",label: "1小时"},
  {value: "3",label: "3小时"},
  {value: "6",label: "6小时"},
  {value: "12",label: "12小时"},
])
const skElement = ref(['WWName', 'wswdName','TEM','RHU']);
const skElementDatas = ref([
  {value: "WWName",label: "天气现象"},
  {value: "wswdName",label: "风速风向"},
  {value: "TEM", label: "气温"},
  {value: "RHU",label: "相对湿度"}
]);
const ybhourElement = ref(['wea', 'wdName', 'tmp','rh']);
const ybhourElementDatas = ref([
  {value: "wea",label: "天气现象"},
  {value: "wdName",label: "风速风向"},
  {value: "tmp", label: "气温"},
  {value: "rh",label: "相对湿度"}
]);
const ybdayElement = ref(['tqxxName', 'edaName', 'tmpName']);
const ybdayElementDatas = ref([
  {value: "tqxxName",label: "天气现象"},
  {value: "edaName",label: "风速风向"},
  {value: "tmpName", label: "气温"}
]);
const textActiveItem = ref({});
const copyVal = ref("");
const tagLoading = ref(false);
const changeTagType = (type)=>{
  tagType.value = type;
}
const queryTag = ()=>{
  tagLoading.value = true;
  cpzzApi.getLabelByTaskId().then(res=>{
    tagLoading.value = false;
    const data = res.data;
    data.map(item=>{
      item.uuid = uuidv4();
      if (item.is_show == 0) {
          //提供用户改参数的标签
          let obj = JSON.parse(item.params);
          if (obj.startTime == "") {
              obj.startTime = $moment().subtract(1, 'days').format('YYYY-MM-DD 08:00:00')
          }
          if (obj.endTime == "") {
              obj.endTime = $moment().format('YYYY-MM-DD 08:00:00')
          }
          item.params = JSON.stringify(obj);
          item.paramsObj = JSON.parse(item.params);
          item.detailsObj = JSON.parse(item.details);
      }
    })
    tagTextList.value = data.filter(item=>item.label_type == 0);
    picList.value = data.filter(item=>item.label_type == 1);
    //tableList.value = data.filter(item=>item.label_type == 2);
  })
}
const activeTagData = (data) => {
    if (textActiveItem.value.label_id == data.label_id) {
        textActiveItem.value = {};
    } else {
        copyVal.value = "";
        textActiveItem.value = data;
        if(textActiveItem.value.is_show == "0" && textActiveItem.value?.paramsObj?.lat && (textActiveItem.value?.detailsObj?.lat_boolean || textActiveItem.value?.detailsObj?.lon_boolean)){
          textActiveItem.value.paramsObj.lat = checkLocationObj.value.lat;
          textActiveItem.value.paramsObj.lon = checkLocationObj.value.lon;
        }
        if(textActiveItem.value.is_show != "0"){
          queryTagData();
        }
    }
}
const queryTagDataBefore = () => {
    if (textActiveItem.value.is_show == "0") {
        textActiveItem.value.params = JSON.stringify(textActiveItem.value.paramsObj);
    }
    queryTagData();
}
const queryTagData = () => {
    tagLoading.value = true;
    copyVal.value = "";
    let data = JSON.parse(JSON.stringify(textActiveItem.value));
    delete data.detailsObj;
    delete data.paramsObj;
    delete data.uuid;
    cpzzApi.getCommLabel(JSON.stringify(data)).then(res => {
        tagLoading.value = false;
        const { code, msg } = res;
        if (code == 200 && msg != "") {
            let newData = msg;
            if(tagType.value == 'pic'){
              newData = 'data:image/png;base64,' + msg;
            }
            copyVal.value = newData;
        } else {
            ElMessage.warning(msg);
        }
    })
}
const queryTableData = ()=>{
    tableList.value = [];
    let station = stationList.value.filter(item=>item.station_id == stationCheck.value)[0];
    const resulltfun = (res)=>{
      tagLoading.value = false;
      if(res.code == 200){
        if(res.data.length == 0){
          ElMessage.warning('无数据');
          return;
        }
        const data = res.data;
        let rowsSapn = [];
        data.map(item => {
            if (rowsSapn.indexOf(item.date) == -1) {
                rowsSapn.push(item.date);
                item['rowspan'] = data.filter(fil => fil.date == item.date).length;
            }
        })
        tableList.value = data;
      }else{
        ElMessage.error(res.msg);
        return;
      }
    }
    if(tableType.value == "sk"){
      const startTime = $moment($moment(startDay.value).format("YYYY-MM-DD") + " " + startHour.value+":00").format("YYYY-MM-DD HH:00:00");
      const endTime = $moment($moment(endDay.value).format("YYYY-MM-DD") + " " + endHour.value+":00").format("YYYY-MM-DD HH:00:00");
      if($moment(startTime).isAfter($moment(endTime))){
        ElMessage.warning('开始时间不能大于结束时间');
        return;
      }
      tagLoading.value = true;
      resuTabType.value = "sk";
      cpzzApi.getRealList(
        {
          stationId: stationCheck.value,
          startTime: startTime,
          endTime: endTime,
        }
      ).then(resulltfun).catch(err=>{
        tagLoading.value = true;
      });
    }else{
      if(ybType.value == "hour"){
        if(Number(hourStartSk.value)>Number(hourEndSk.value)){
          ElMessage.warning('开始时效不能大于结束时效');
          return;
        }
        if((Number(hourEndSk.value) - Number(hourStartSk.value))%Number(hourInterval.value)!= 0){
          ElMessage.warning('结束时效减去开始时效不能被时效间隔整除');
          return;
        }
        resuTabType.value = "ybHour";
        tagLoading.value = true;
        hourIntervalbak.value = hourInterval.value;
        cpzzApi.getYbListByParam(
          {
            fcstTime: $moment($moment(qbDay.value).format("YYYY-MM-DD") + " " + qbHour.value, "YYYY-MM-DD HH:00:00").format("YYYY-MM-DD HH:00:00"),
            interval: hourInterval.value,
            startP: hourStartSk.value,
            endP: hourEndSk.value,
            lat:station.lat,
            lon:station.lon
          }
        ).then(resulltfun).catch(err=>{
          tagLoading.value = true;
        });
      }else{
        resuTabType.value = "ybDay";
        tagLoading.value = true;
        cpzzApi.getNDaysForeList(
          {
            fcstTime: $moment($moment(qbDay.value).format("YYYY-MM-DD") + " 00:00", "YYYY-MM-DD HH:00:00").format("YYYY-MM-DD 00:00:00"),
            aging : dayStartSk.value,
            lat:station.lat,
            lon:station.lon
          }
        ).then(resulltfun).catch(err=>{
          tagLoading.value = true;
        });
      }
    }
}

const copyText = () => {
    if (!copyVal.value) {
        ElMessage.warning('无内容');
        return;
    }
    if (copyVal.value.indexOf("data:image") !=-1) {
        ElMessage.warning('请在图片标签模块复制');
        return;
    }
    const textarea = document.createElement('textarea')
    textarea.value = copyVal.value;
    document.body.appendChild(textarea)
    textarea.focus()
    textarea.select()
    const result = document.execCommand('copy')
    if (result) {
        ElMessage.success('复制成功');
    } else {
        ElMessage.error('复制失败')
    }
    document.body.removeChild(textarea);
    //pageofficectrl.word.SetTextToSelection(value);
}

const imgDiv = ref();
const copyImg = () => {
    if (!copyVal.value) {
        ElMessage.warning('无内容');
        return;
    }
    if (copyVal.value.indexOf("data:image") == -1) {
        ElMessage.warning('请在图片标签模块查询');
        return;
    }
    const range = document.createRange();
    range.selectNode(imgDiv.value);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    ElMessage.success('复制成功');
    //pageofficectrl.word.InsertWebImage("http://localhost:3001/nanjing/proxy/zdtq_img/MAXT/2023/202312/20231207/MAXT-24H_20231207060000_PB-PE_all_0-1-2_0-1-2_BASE_AGNJ.png", false, "4");
}
const tableDiv = ref();
const copyTable = () => {
    const range = document.createRange();
    range.selectNode(tableDiv.value);
    window.getSelection().removeAllRanges()
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges()
    ElMessage.success('复制成功');
}
onMounted(()=>{
  window.Save = Save;
  window.SaveAs = SaveAs;
  window.IsFullScreen = IsFullScreen;
  window.Close = Close;
  // 以下的为PageOffice事件的回调函数，名称不能改，否则PageOffice控件调用不到
  window.OnPageOfficeCtrlInit = OnPageOfficeCtrlInit;
  window.AfterDocumentOpened = AfterDocumentOpened;
  window.BeforeDocumentSaved = BeforeDocumentSaved;
  window.AfterDocumentSaved = AfterDocumentSaved;
  window.openWorld = openWorld;
  openWorld();
  queryTag();
  initMap();
})
</script>

<template>
<div class="pageofficeMainContain">
  <div class="pageofficeMainLeft">
    <div class="pageofficeTitle">
      <Input type="text" v-model="pageofficeTitle" />
      <div class="officeBtn">
        <span>{{decodeURIComponent(params.text)}}&nbsp;&nbsp;第{{params.orders?params.orders:'-'}}期</span>
        <Button color="blue" class="h-btn h-btn-s" @click.prevent.stop="Save">保存</Button>
        <input id="taskId" v-model="params.taskId" type="hidden"/>
        <input id="userId" v-model="params.userId" type="hidden"/>
        <input id="productId" v-model="params.productId" type="hidden"/>
        <input id="year" v-model="params.year" type="hidden"/>
        <input id="orders" v-model="params.orders" type="hidden"/>
        <input id="modelId" v-model="params.modelId" type="hidden"/>
        <input id="abspath" v-model="params.abspath" type="hidden"/>
        <input id="fileName" v-model="pageofficeTitle" type="hidden"/>
        <Button color="blue" class="h-btn h-btn-s" style="margin:0px 0px 0px 10px" @click.prevent.stop="SaveAs">下载</Button>
        <Button color="blue" class="h-btn h-btn-s" style="margin:0px 10px" @click.prevent.stop="publish">发布</Button>
      </div>
    </div>
    <div class="pageoffice">
      <div id="office" v-html="poHtmlCode"></div>
    </div>
  </div>
  <div class="pageofficeMainRight">
    <div class="pageofficeMainRightTop">
      <div id="mapId"></div>
      <div :class="['moveLatLon']">
        <span>经度:{{moveObj.lon}}&nbsp;纬度:{{moveObj.lat}}</span>
      </div>
      <div :class="['stationSelectDiv']">
        <el-select  v-model="stationCheck" class="m-2" placeholder="Select" style="width: 150px" filterable>
          <el-option  v-for="item in stationList" :key="item.station_id" :label="item.station_name" :value="item.station_id"/>
        </el-select>
      </div>
    </div>
    <div class="pageofficeMainBottom">
      <!-- 文字-图片-表格展示区 -->
      <div class="tagShowContain">
        <div class="tab">
          <span :class="['text' == tagType ? 'active':'']" @click="changeTagType('text')">文字</span>
          <span :class="['pic' == tagType ? 'active':'']" @click="changeTagType('pic')">图片</span>
          <span :class="['table' == tagType ? 'active':'']" @click="changeTagType('table')">表格</span>
        </div>
        <div class="tagContent"  v-loading="tagLoading">
          <div v-if="tagType == 'text'" :class="['textContain']">
            <div v-for="(item, index) in tagTextList" :key="item.label_name" :class="['tagTextCategory']">
                <div :class="['labelName',textActiveItem.uuid == item.uuid?'check':'']" @click="activeTagData(item)">{{ item.label_name }}</div>
                <div v-if="item.is_show == '0'" v-show="textActiveItem.uuid == item.uuid" :class="['tagTextPop',index%2 ==0 ?'oushu':'jishu']" >
                  <template v-for="(keyItem, keyIndex) in item.paramsObj">
                    <div v-show="item.detailsObj[keyIndex + '_boolean']" :class="['tagQueryQua']">
                      <label>{{ (item.detailsObj[keyIndex]+'').split('|')[0] }}：</label>
                      <el-input v-model="item.paramsObj[keyIndex]" :title="item.detailsObj[keyIndex + '_info']"></el-input>
                    </div>
                    <div v-show="item.detailsObj[keyIndex + '_boolean'] && (item.detailsObj[keyIndex]+'').split('|')[1]" class="tagQueryQuatip">
                      {{ (item.detailsObj[keyIndex]+'').split('|')[1] }}
                    </div>
                  </template>
                  <div>
                    <el-button v-if="item.is_show == '0'" @click="queryTagDataBefore" style="float:right;margin-left: 10px;" size="mini">查询</el-button>
                  </div>
                </div>
            </div>
          </div>
          <div v-if="tagType == 'pic'" :class="['textContain','pic']">
            <div v-for="(item, index) in picList" :key="item.label_name" :class="['tagTextCategory']">
                <div :class="['labelName',textActiveItem.uuid == item.uuid?'check':'']" @click="activeTagData(item)">{{ item.label_name }}</div>
                <div v-show="textActiveItem.uuid == item.uuid && item.is_show == '0'" :class="['tagTextPop',index%2 ==0 ?'oushu':'jishu']" >
                  <template v-if="item.is_show == '0'" v-for="(keyItem, keyIndex) in item.paramsObj">
                    <div v-show="item.detailsObj[keyIndex + '_boolean']" :class="['tagQueryQua']">
                      <label>{{ (item.detailsObj[keyIndex]+'').split('|')[0] }}：</label>
                      <el-input v-model="item.paramsObj[keyIndex]" :title="item.detailsObj[keyIndex + '_info']"></el-input>
                    </div>
                    <div v-show="item.detailsObj[keyIndex + '_boolean'] && (item.detailsObj[keyIndex]+'').split('|')[1]" class="tagQueryQuatip">
                      {{ (item.detailsObj[keyIndex]+'').split('|')[1] }}
                    </div>
                  </template>
                  <div>
                    <el-button v-if="item.is_show == '0'" @click="queryTagDataBefore" style="float:right;margin-left: 10px;" size="mini">查询</el-button>
                  </div>
                </div>
            </div>
          </div>
          <div v-if="tagType == 'table'" :class="['textContain','table']">
            <div>
              <span>类型：</span>
              <el-radio-group v-model="tableType" class="ml-4">
                <el-radio label="sk" size="large">实况</el-radio>
                <el-radio label="yb" size="large">预报</el-radio>
             </el-radio-group>
            </div>
            <template v-if="tableType == 'sk'">
              <div>
                <span>要素：</span>
                <el-select v-model="skElement" multiple collapse-tags collapse-tags-tooltip placeholder="Select" style="width: 240px">
                  <el-option  v-for="item in skElementDatas" :key="item.value" :label="item.label"  :value="item.value"/>
                </el-select>
              </div>
              <div class="timeRange">
                <!-- 开始结束时间 -->
                <span>开始时间：</span>
                <el-date-picker v-model="startDay" type="date" placeholder="Pick a day" />
                <el-time-select v-model="startHour" start="08:00" step="12:00" end="20:00" placeholder="Select time"/>
              </div>
              <div class="timeRange">
                <span>结束时间：</span>
                <el-date-picker v-model="endDay" type="date" placeholder="Pick a day"/>
                <el-time-select v-model="endHour" start="08:00" step="12:00" end="20:00" placeholder="Select time"/>
              </div>
            </template>
            <template v-if="tableType == 'yb'">
              <div>
                <span>表格类型：</span>
                <el-radio-group v-model="ybType" class="ml-4">
                  <el-radio label="hour" size="large">小时预报</el-radio>
                  <el-radio label="day" size="large">天预报</el-radio>
                </el-radio-group>
              </div>
              <div v-if="ybType == 'hour'">
                <span>要素：</span>
                <el-select v-model="ybhourElement" multiple collapse-tags collapse-tags-tooltip placeholder="Select" style="width: 240px">
                  <el-option  v-for="item in ybhourElementDatas" :key="item.value" :label="item.label"  :value="item.value"/>
                </el-select>
              </div>
              <div v-if="ybType == 'day'">
                <span>要素：</span>
                <el-select v-model="ybdayElement" multiple collapse-tags collapse-tags-tooltip placeholder="Select" style="width: 240px">
                  <el-option  v-for="item in ybdayElementDatas" :key="item.value" :label="item.label"  :value="item.value"/>
                </el-select>
              </div>
              <div class="timeRange">
                <span>起报时间：</span>
                <el-date-picker v-model="qbDay" type="date" placeholder="Pick a day" />
                <el-time-select v-if="ybType == 'hour'" v-model="qbHour" start="08:00" step="12:00" end="20:00" placeholder="Select time"/>
              </div>
              <div v-if="ybType == 'day'" class="sx">
                <span>时效(天)：</span>
                <el-select v-model="dayStartSk"  placeholder="Select"  style="width: 240px" filterable>
                  <el-option  v-for="item in dayStartSkDatas" :key="item.value" :label="item.label"  :value="item.value"/>
                </el-select>
              </div>
              <div v-if="ybType == 'hour'"  class="sx">
                <span>时效：</span>
                <el-input type="number" v-model="hourStartSk" min="0" placeholder="Please input" />
                <div style="padding:0px 10px;"> ~ </div>
                <el-input type="number" v-model="hourEndSk" min="0"  placeholder="Please input" />
              </div>
              <div v-if="ybType == 'hour'" class="sx">
                <span>时效间隔：</span>
                <el-select v-model="hourInterval"  placeholder="Select"  style="width: 240px" filterable>
                  <el-option  v-for="item in hourIntervalDatas" :key="item.value" :label="item.label"  :value="item.value"/>
                </el-select>
              </div>
            </template>
            <div>
              <span>站点选择：</span>
              <el-select  v-model="stationCheck" class="m-2" placeholder="Select" style="width: 240px" filterable>
                <el-option  v-for="item in stationList" :key="item.station_id" :label="item.station_name" :value="item.station_id"/>
              </el-select>
            </div>
            <div class="queryBtnDiv">
              <el-button  @click="copyTable" style="float:right" size="mini">复制</el-button>
              <el-button  @click="queryTableData" style="float:right" size="mini">查询</el-button>
            </div>
            <div ref="tableDiv" class="tableDiv" v-if="tableList.length > 0">
                <table class="tableSet">
                    <thead v-if="resuTabType == 'sk'">
                        <tr>
                            <th>日期</th>
                            <th v-if="skElement.includes('WWName')">天气</th>
                            <th v-if="skElement.includes('wswdName')">风速风向</th>
                            <th v-if="skElement.includes('TEM')">气温(℃)</th>
                            <th v-if="skElement.includes('RHU')">相对湿度(%)</th>
                        </tr>
                    </thead>
                    <tbody v-if="resuTabType == 'sk'">
                        <tr v-for="item in tableList">
                            <td>{{ item.time }}</td>
                            <td v-if="skElement.includes('WWName')">{{ item.WWName }}</td>
                            <td v-if="skElement.includes('wswdName')">{{ item.wswdName }}</td>
                            <td v-if="skElement.includes('TEM')">{{ item.TEM }}</td>
                            <td v-if="skElement.includes('RHU')">{{ item.RHU}}</td>
                        </tr>
                    </tbody>
                    <thead v-if="resuTabType == 'ybHour'">
                        <tr>
                            <th v-if="hourIntervalbak !='1'">日期</th>
                            <th>时间</th> 
                            <th v-if="ybhourElement.includes('wea')">天气</th>
                            <th v-if="ybhourElement.includes('wdName')">风速风向</th>
                            <th v-if="ybhourElement.includes('tmp')">气温(℃)</th>
                            <th v-if="ybhourElement.includes('rh')">相对湿度(%)</th>
                        </tr>
                    </thead>
                    <tbody v-if="resuTabType == 'ybHour'">
                        <tr v-for="item in tableList">
                            <td :rowspan="item.rowspan" v-if="hourIntervalbak != '1' && item['rowspan']">{{ $moment(item.dateTime).format("DD日")}}</td>
                            <td v-if="hourIntervalbak != '1'">{{ item.hour}}</td>
                            <td v-if="hourIntervalbak == '1'">{{$moment(item.dateTime).format("HH时")}}</td>
                            <td v-if="ybhourElement.includes('wea')">{{ item.wea }}</td>
                            <td v-if="ybhourElement.includes('wdName')">{{ item.wdName }}{{ item.wsName }}</td>
                            <td v-if="ybhourElement.includes('tmp')">{{ item.tmp }}</td>
                            <td v-if="ybhourElement.includes('rh')">{{ item.rh}}</td>
                        </tr>
                    </tbody>
                    <thead v-if="resuTabType == 'ybDay'">
                        <tr>
                            <th>日期</th>
                            <th v-if="ybdayElement.includes('tqxxName')">天气</th>
                            <th v-if="ybdayElement.includes('edaName')">风速风向</th>
                            <th v-if="ybdayElement.includes('tmpName')">气温(%)</th>
                        </tr>
                    </thead>
                    <tbody v-if="resuTabType == 'ybDay'">
                        <tr v-for="item in tableList">
                            <td>{{ item.time }}</td>
                            <td v-if="ybdayElement.includes('tqxxName')">{{ item.tqxxName }}</td>
                            <td v-if="ybdayElement.includes('edaName')">{{ item.edaName }}</td>
                            <td v-if="ybdayElement.includes('tmpName')">{{ item.tmpName }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
          </div>
            <template v-if="tagType == 'pic'&&textActiveItem.label_type == '1'">
              <div>
                <el-button  @click="copyImg" style="float:right" size="mini">复制</el-button>
             </div>
                <!-- <el-image v-if="copyVal" :src="copyVal" :previewSrcList="[copyVal]"/> -->
                <img ref="imgDiv" style="width: 96%;margin:5px auto;" :src="copyVal"  />
            </template>
            <template v-if="tagType == 'text'&&textActiveItem.label_type == '0'">
              <div>
                <el-button  @click="copyText" style="float:right" size="mini">复制</el-button>
              </div> 
              <div class="textCopyDiv">{{ copyVal }}</div>
            </template>
        </div>
      </div>
    </div> 
  </div>
</div>
</template>

<style scoped  lang="scss">
.pageofficeMainContain{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 5px;
  color: #606266;
  font-size: 16px;
  padding:5px;
  .range{
    padding:0px 10px;
  }
  .pageofficeMainRight{
    display: flex;
    width: 400px;
    flex-direction: column;
    gap: 5px;
    .pageofficeMainRightTop{
      border:2px solid #085898;
      border-radius: 10px;
      height: 300px;
      padding:2px;
      position: relative;
      flex: none;
      #mapId{
        width:100%;
        height:100%;
      }
      .moveLatLon{
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: auto;
        padding:2px 5px;
        border-radius:5px;
        background-color: rgba(255, 255, 255, 1);
      }
      .stationSelectDiv{
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
    .pageofficeMainBottom{
      border:2px solid #085898;
      border-radius: 10px;
      height: calc(100% - 305px);
      flex: none;
      flex-direction: column;
      display: flex;
      padding:5px 0px;
      .tagShowContain{
        width: 100%;
        height: 100%;
        flex-direction: column;
        .tab{
          width: 100%;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          border-bottom: 1px solid #085898;
          position: relative;
          align-items: center;
          justify-content: center;
          display: flex;
          span{
            display: inline-block;
            flex: 1;
            text-align: center;
            &.active{
              font-weight: bold;
              color: #3b91ff;
              border-bottom: 2px solid #3b91ff;
            }
          }
        }
        .tagContent{
          padding:5px;
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100% - 30px);
          .textCopyDiv {
              width: 100%;
              max-height: 70px;
              overflow-y: auto;
              text-align: left;
          }
          .textContain{
            cursor: pointer;
            height: calc(100% - 250px);
            &.table{
              padding: 5px 10px;
              height: 100%;
              >div{
                width: 100%;
                height: 25px;
                line-height: 25px;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                justify-content:flex-start;
                >span{
                  flex: none;
                  margin-right: 10px;
                  flex-basis: 80px;
                  text-align: right;
                }
                >div{
                  flex:none;
                }
                &.timeRange{
                  :deep(.el-select){
                    line-height: 25px;
                    width: 100px;
                    height: 25px;
                    .is-hovering .el-select__suffix{
                     // display: none;
                    }
                  }
                  :deep(.el-date-editor){
                    line-height: 25px;
                    width: 130px;
                    margin-right: 5px;
                    height: 25px;
                   .el-input__wrapper{
                    width:130px;
                    flex: none;
                   }
                  }
                }
                &.sx{
                  :deep(.el-input){
                    width: 70px;
                    height: 25px;
                    line-height: 25px;
                  }
                }
                :deep(.el-select__wrapper){
                  min-height: 25px;
                  padding: 0px 12px;
                }
                
                &.queryBtnDiv{
                  justify-content: flex-end;
                }
              }
              //::v-deep children 或:deep()
              :deep(.el-radio.el-radio--large){
                width: 90px;
                height: 25px;
                line-height: 25px;
                .el-radio__label{
                  font-size: 16px;
                }
              }
              .tableDiv{
                height: auto;
                font-size: 14px;
                overflow-y: auto;
                max-height: calc(100% - 258px);
                display: block;
                color: #000;
                .tableSet {
                  border-collapse: collapse;
                  page-break-inside: avoid;
                  border: 1px solid #000;
                  width: 100%;
                  text-align: center;
                  thead {
                      // position: sticky;
                      // top: 0px;
                      // //background: #fff;
                      // z-index: 99;
                  }
                  th {
                      box-sizing: border-box;
                      border: 1px solid #000;
                      // padding: 0px 5px;
                      page-break-inside: avoid;
                      text-align: center;
                      font-weight: normal;
                  }

                  td {
                      border: 1px solid #000;
                      text-align: center;
                      // padding: 0px 5px;
                  }
                }
              }
            }
            .tagTextCategory{
              text-align: center;
              margin:5px 0px 0px 0px;
              position: relative;
              width: 50%;
              float: left;
              .labelName{
                &.check,&:hover{
                  background: #6eaeff;
                  border-radius: 5px;
                  color: #fff;
                }
              }
              .tagTextPop {
                  box-shadow: 0px 0px 5px #858181;
                  border-radius: 10px;
                  background: #fff;
                  border: 1px solid #5895EE;
                  background-size: 100% 100%;
                  z-index: 9;
                  display: block;
                  position: absolute;
                  top:30px;
                  width: 235px;
                  // height: 136px;
                  padding: 5px;
                  font-size: 15px;
                  &.oushu{
                    left: 0px;
                  }
                  &.jishu{
                    right: 0px;
                  }
                  .tagQueryQua {
                      display: flex;
                      height: 25px;
                      line-height: 25px;
                      margin-bottom: 5px;
                      label {
                          width: 8rem;
                          text-align: right;
                      }
                  }
                  .tagQueryQuatip{
                    width: 100%;
                    font-size: 13px;
                    color: red;
                    text-align: left;

                  }

                  &::after {
                    border-top: 2px solid #5895EE;
                    transform: rotate(45deg);
                    top: -7px;
                    left: 40%;
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: #fff;
                    border-left: 2px solid #5895EE;
                    content: "";
                  }
              }
              
            }
            &.noFlex{
              display: block !important;
            }
            &.pic{
              height: calc(100% - 360px);
            }
          }
        }
      }
    }
  }
  .pageofficeMainLeft{
    flex: 1;
    border:2px solid #085898;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    .pageofficeTitle{
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom:1px solid #085898;
      position: relative;
      .officeBtn{
        color: #000;
        position: absolute;
        right: 10px;
        top: 0px;
        span{
          margin-right: 10px;
        }
      }
    }
    .pageoffice{
      flex: 1;
      #office{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.pageofficeMainRight{
  .el-input__wrapper{
    padding: 1px 5px;
  }
  .el-button{
    height: 25px;
    padding: 2px 10px;
  }
  input.h-input{
    background: transparent;
    text-align: left;
    width: 100%;
    height:30px;
  }
  .h-select-input-border .h-select-show{
    background-color:transparent;
    min-height: 30px;
  }
  .h-select-value-single{
    line-height: 25px;
    height: 25px;
    margin-bottom: 0px;
  }
}
.pageofficeMainLeft{
  input.h-input{
    border: none;
    background: transparent;
    text-align: center;
    width: 100%;
    font-size: 16px;
  }
}
  
</style>
